<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--遍历数组-->
    <h2>人员列表</h2>
    <ul>
        <li v-for="(item, index) in personList" :key="index"> <!--key是每一个li节点的唯一标识-->
            {{item.id}}-{{item.name}}-{{item.age}}--{{index}}
        </li>
    </ul>
    <!--遍历对象-->
    <h2>汽车信息</h2>
    <ul>
        <li v-for="(car, index) in cars" :key="index"> <!--key是每一个li节点的标识-->
            {{car}}--{{index}}
        </li>
    </ul>
    <!--遍历字符串-->
    <h2>字符串信息</h2>
    <ul>
        <li v-for="(str, index) in strings" :key="index"> <!--key是每一个li节点的标识-->
            {{str}}--{{index}}
        </li>
    </ul>
    <!--遍历指定次数-->
    <h2>字符串信息</h2>
    <ul>
        <li v-for="(str, index) in 10" :key="index"> <!--key是每一个li节点的标识-->
            {{str}}--{{index}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const personList = [
        {"id": 1, "name": "周围", "age": 18},
        {"id": 2, "name": "张三", "age": 18},
        {"id": 3, "name": "李四", "age": 20},
        {"id": 4, "name": "王五", "age": 28},
        {"id": 5, "name": "赵六", "age": 30},
    ]
    const cars = {
        "name": "奥迪a5l",
        "price": 298800,
        "color": "black"
    }
    const strings = "hello"

    const vm = new Vue({
        el: "#root",
        data: {
            personList: personList,
            cars: cars,
            strings: strings,
        }
    })
</script>

</body>
</html>